<template>
  <div class="tabs">
    <div class="tab inline" :class="{active: activeTab===name}" @click="clickTab(name)" v-for="name in list" :key="name">{{name}}</div>
  </div>
</template>

<script>
export default {
  props: ['list', 'activeTab'],
  methods: {
    clickTab(name) {
      if (this.activeTab === name) {
        name = null
      }
      this.$emit('on-change', name)
    }
  }
}
</script>

<style lang="less" scoped>
.tabs{
  text-align: center;
  margin-top: 10px;
}
.tab{
  margin: 0 20px;
  cursor: pointer;
  font-size: 16px;
  &:before{
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    background-image: url(~@/assets/icons/复选框.png);
    background-size: 100% 100%;
    margin-right: 5px;
  }
  &.active:before{
    background-image: url(~@/assets/icons/复选框_选中.png);
  }
}
</style>